<template>
    <div class="login-container">
        <van-cell-group class="login-card">
            <div class="logo-container">
                <h2 class="ft-c-g">修改密码</h2>
            </div>
            <!-- 更新密码 -->
            <van-form class="form-container">
                <van-field v-model="registerForm.oldPwd" type="password" placeholder="当前密码"/>
                <van-field v-model="registerForm.password" type="password" placeholder="新密码"/>
                <van-field v-model="registerForm.rePassword" type="password" placeholder="再次输入"/>
                <van-button block type="success" style="background-color: #059669" @click="handleRePassword">
                    确认更新
                </van-button>
                <div class="tip-btn-box">
                    <span class="tip-btn text-success" @click="router.push({path: '/home'})">返回首页</span>
                </div>
            </van-form>
        </van-cell-group>
    </div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {authApi} from "../api/auth.ts";
import {showDialog, showToast} from 'vant';

const router = useRouter()
const isLogin = ref(0);
const registerForm = ref({
    oldPwd: "",
    password: "",
    rePassword: "",
});

const handleRePassword = () => {
    if (registerForm.value.password !== registerForm.value.rePassword) {
        showToast('两次密码不一致');
        return;
    }
    if (registerForm.value.password.length < 6) {
        showToast('请输入最少6位密码');
        return;
    }
    authApi.updatePassword(registerForm.value).then((res) => {
        console.log("修改密码成功", res);
        showDialog({
            message: '修改密码成功',
        }).then(() => {
            router.push({path: "/home"});
        });
    });
};


/** 初始化 **/
onMounted(() => {

})
</script>

<style scoped lang="scss">
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    h2 {
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .logo {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }

    p {
        text-align: center;
        font-size: 14px;
        color: #999;
        margin: 0;
    }
}

.login-card {
    width: 300px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    top: -50px;
    box-shadow: 0 4px 10px rgba(180, 180, 180, 0.08);
}


.tip-btn-box {
    margin-top: 12px;
    text-align: center;
}

.tip-btn {
    margin-left: 6px;
    cursor: pointer;
}

.main-footer {
    position: absolute;
    bottom: 20px;
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #898989;
    font-weight: lighter;
}

.ban-box {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 14px;
}

</style>
